<style>

    #chart {
        width: 960px;
        height: 500px;
        background: #bbb;
    }
    text {
        pointer-events: none;
    }

    .grandparent text {
        font-weight: bold;
    }

    rect {
        fill: none;
        stroke: #fff;
    }

    rect.parent,
    .grandparent rect {
        stroke-width: 2px;
    }

    .grandparent rect {
        fill: #fff;
    }

    .children rect.parent,
    .grandparent rect {
        cursor: pointer;
    }

    rect.parent {
        pointer-events: all;
    }

    .children:hover rect.child,
    .grandparent:hover rect {
        fill: #aaa;
    }

</style>
<div id="body">
</div>

<script type="text/javascript">

    var w = 1080 - 80,
    h = 600 - 180,
    x = d3.scale.linear().range([0, w]),
    y = d3.scale.linear().range([0, h]),
    color = d3.scale.category20c(),
    root,
    node;

    var treemap = d3.layout.treemap()
    .round(false)
    .size([w, h])
    .sticky(true)
    .value(function(d) { return d.size; });

    var svg = d3.select("#body").append("div")
    .attr("class", "chart")
    .style("width", w + "px")
    .style("height", h + "px")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(.5,.5)");

    d3.json("<?php echo Yii::app()->request->baseUrl; ?>/index/json-data", function(data) {
        node = root = data;

        var nodes = treemap.nodes(root)
        .filter(function(d) { return !d.children; });

        var cell = svg.selectAll("g")
        .data(nodes)
        .enter().append("svg:g")
        .attr("class", "cell")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .on("click", function(d) { return zoom(node == d.parent ? root : d.parent); });

        cell.append("svg:rect")
        .attr("width", function(d) { return d.dx - 1; })
        .attr("height", function(d) { return d.dy - 1; })
        .style("fill", function(d) { return color(d.parent.name); });

        cell.append("svg:text")
        .attr("x", function(d) { return d.dx / 2; })
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "middle")
        .text(function(d) { return d.name; })
        .style("opacity", function(d) { d.w = this.getComputedTextLength(); return d.dx > d.w ? 1 : 0; });

        d3.select(window).on("click", function() { zoom(root); });

        d3.select("select").on("change", function() {
            treemap.value(this.value == "size" ? size : count).nodes(root);
            zoom(node);
        });
    });

    function size(d) {
        return d.size;
    }

    function count(d) {
        return 1;
    }

    function zoom(d) {
        var kx = w / d.dx, ky = h / d.dy;
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        var t = svg.selectAll("g.cell").transition()
        .duration(d3.event.altKey ? 7500 : 750)
        .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; });

        t.select("rect")
        .attr("width", function(d) { return kx * d.dx - 1; })
        .attr("height", function(d) { return ky * d.dy - 1; })

        t.select("text")
        .attr("x", function(d) { return kx * d.dx / 2; })
        .attr("y", function(d) { return ky * d.dy / 2; })
        .style("opacity", function(d) { return kx * d.dx > d.w ? 1 : 0; });

        node = d;
        d3.event.stopPropagation();
    }
        
</script>
<br/>
<div class="break">
    <table class="table table-striped table table-striped table-bordered table-condensed">
        <tr>
            <th>#</th>
            <th>Position</th>
            <th>Landing page</th>
            <th>Page title</th>
            <th>Pageviews</th>
            <th>Bounces</th>
        </tr>
        <?php foreach ($top30pages as $page): ?>
            <tr>
                <td><?php echo $page->rank ?></td>
                <td>
                    <?php if ($page->up_status > 0): ?>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/up.gif"/>
                    <?php elseif ($page->up_status == 0): ?>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/same.gif"/>
                    <?php else: ?>
                        <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/down.gif"/>
                    <?php endif; ?>
                    <span style="font-size:8px"><?php echo $page->margin?></span>
                </td>
                <td>
                    <a href="<?php echo $this->createUrl('index/history',array('landing_page'=> base64_encode($page->landing_page),'page_title'=>  base64_encode($page->page_title)));?>"><?php echo $page->landing_page ?></a>
                </td>
                <td>
                    <?php echo $page->page_title ?>
                </td>
                <td><?php echo $page->page_views ?></td>
                <td><?php echo $page->bounce_rate ?></td>
            </tr>
        <?php endforeach; ?>
    </table>
</div>